<template>
  <pageTabelLayout>
    <template #pageHeader>
      <!-- 新增计划订单 -->
      <div class="my-header">
        <div class="search-form" v-if="headerShow">
          <a-form :model="fromList" layout="inline">
            <a-form-item field="endTime" label="下单日期：" label-col-flex="80px" :style="{width:'300px'}">
              <a-date-picker popup-container="html" v-model="fromList.endTime" style="width:100%"/>
            </a-form-item>
            <a-form-item field="ColorId" label="色号：" label-col-flex="80px" :style="{width:'300px'}">
              <a-input v-model="fromList.ColorId"/>
            </a-form-item>
            <a-form-item field="ColorName" label="色称：" label-col-flex="80px" :style="{width:'300px'}">
              <a-input v-model="fromList.ColorName"/>
            </a-form-item>
            <a-form-item field="customName" label="客户名称：" label-col-flex="80px" :style="{width:'300px'}">
              <a-select popup-container="html" :style="{ width: '320px' }" v-model="fromList.customName" allow-clear>
                <a-option v-for="item of basicData.custom" :value="item.id" :key="item.id"
                          :label="item.customName"/>
              </a-select>
            </a-form-item>
            <a-form-item field="clientDyeCode" label="染整单号：" label-col-flex="80px" :style="{width:'300px'}">
              <a-select popup-container="html" :style="{ width: '320px' }" v-model="fromList.clientDyeCode" allow-clear>
              </a-select>
            </a-form-item>
            <a-form-item field="genDanCode" label="跟单号：" label-col-flex="80px" :style="{width:'300px'}">
              <a-select popup-container="html" :style="{ width: '320px' }" v-model="fromList.genDanCode" allow-clear>
              </a-select>
            </a-form-item>
            <a-form-item field="dyType" label="订单类型：" label-col-flex="80px" :style="{width:'300px'}">
              <a-select popup-container="html" :style="{ width: '320px' }" v-model="fromList.dyType" allow-clear>
                <a-option v-for="item of basicData.orderNature" :value="item.id" :key="item.id"
                          :label="item.detailName"/>
              </a-select>
            </a-form-item>
            <a-form-item field="account" label="业务员：" label-col-flex="80px" :style="{width:'300px'}">
              <a-select popup-container="html" :style="{ width: '320px' }" v-model="fromList.account" allow-clear>
                <a-option v-for="item of basicData.hrEmployee" :value="item.id" :key="item.id"
                          :label="item.text"/>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
        <div class="my-divisders">
          <a-divider orientation="center">
            <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
          </a-divider>
        </div>


        <div class="my-tool-bar">
          <div class="bg-container-1">
            <div>
              <el-button type="primary" :icon="Search" class="stbutencx" @click="selectHandler">查询</el-button>
              <el-button type="success" :icon="CirclePlus" class="stbutenxz"
                         @click="addHandler">新增
              </el-button>
              <el-button plain :icon="Delete" @click="deleteHandler">删除</el-button>
              <el-button plain v-if="shen == 0" :icon="EditPen" @click="changeGetS(1)">审核</el-button>
              <el-button plain v-if="shen == 1" :icon="EditPen" @click="changeGetS(0)">反审</el-button>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #pageTabel>
      <a-tabs   :lazy-load="true" default-active-key="0" @change="changeGet">
        <a-tab-pane key="0" title="待处理">
          <AgGridVuesCopys style="height:calc(100% - 90px);" class="ag-theme-alpine " :columnDefs="tc"
                           :rowData="tableCon.tableConter" :defaultColDef="defaultColDef" rowSelection="multiple"
                           @grid-ready="gridReady">
          </AgGridVuesCopys>
          <paginationCopys :total="paging.total" :page-size="paging.size" v-model:current='pages' show-page-size
                           show-total show-jumper
                           size="mini" @change="pagingChange" @page-size-change="pagingSizeChange"/>
        </a-tab-pane>
        <a-tab-pane key="1" title="已处理">
          <AgGridVuesCopys style="height:calc(100% - 90px);" class="ag-theme-alpine " :columnDefs="ta"
                           :rowData="tableConA.tableConter" :defaultColDef="defaultColDef" @grid-ready="gridReadyA">
          </AgGridVuesCopys>
          <paginationCopys :total="paging.total" :page-size="paging.size" v-model:current='pages' show-page-size
                           show-total show-jumper
                           size="mini" @change="pagingChange" @page-size-change="pagingSizeChange"/>
        </a-tab-pane>
      </a-tabs>
    </template>
    <a-drawer :drawer-style="{ 'zIndex': 9999 }" placement="bottom" :mask-closable="false" width="100" height="100%"
              :visible="pageData.showAdd" unmountOnClose @ok="sideOk" @cancel="sidNo" cancel-text='关闭'
              ok-text='保存'>
      <template #title>
        <div style="position: absolute; right: 50px;">
          <a-space>
            <a-button type="outline">成品面料信息维护</a-button>
            <a-button type="outline" @click="exCustomer">导入台巨客户</a-button>
          </a-space>
        </div>
        {{ pageData.sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" :model="form.a">
          <a-row :gutter="16">
            <a-col :span="4">
              <a-form-item field="orderCode" label="订单号:" label-col-flex="100px">
                <a-input v-model="form.a.orderCode" readonly/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="authorizedStrengthTime" label="编制日期:" label-col-flex="100px">
                <!-- <a-select popup-container="html"  :style="{ width: '320px' }" v-model="form.a.authorizedStrengthTime" allow-clear>
                            </a-select> -->
                <a-date-picker popup-container="html" v-model="form.a.authorizedStrengthTime" style="width: 200px;"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="productionMode" label="生产方式:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.productionMode">
                  <a-option v-for="item of basicData.ProductionMode" :value="item.id" :key="item.id"
                            :label="item.productionMode"/>
                </a-select>

              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="customName" label="客户名称:" label-col-flex="100px"
                           :validate-trigger="['change', 'blur']"
                           :rules="[{ required: true, message: '客户名称必填' }]">

                <a-select popup-container="html" v-if="showJu" :style="{ width: '320px' }" v-model="form.a.customName">
                  <a-option v-for="item of basicData.custom" :value="item.id" :key="item.id"
                            :label="item.customName"/>
                </a-select>

                <a-select popup-container="html" v-else="showJu" :style="{ width: '320px' }" v-model="form.a.customName"
                          disabled>
                  <a-option v-for="item of basicData.custom" :value="item.id" :key="item.id"
                            :label="item.customName"/>
                </a-select>

              </a-form-item>

            </a-col>
            <a-col :span="4">
              <a-form-item field="constitute" label="小缸费构成:" label-col-flex="100px">
                <a-input v-model="form.a.constitute"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="lastDeliveryTime" label="最终交货日期:" label-col-flex="100px">
                <a-date-picker popup-container="html" v-model="form.a.lastDeliveryTime" style="width: 320px;"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="4">
              <a-form-item field="customOrderCode" label="客户订单号:" label-col-flex="100px">
                <a-input v-if="showJu" v-model="form.a.customOrderCode"/>
                <a-input v-else="showJu" v-model="form.a.customOrderCode" readonly/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="workshop" label="生产车间:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.workshop" allow-clear>
                  <!-- <a-option v-for="item of basicData.hrEmployee" :value="item.id" :key="item.id"
                                        :label="item.text" /> -->
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="salesDepartment" label="业务部:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.salesDepartment"
                          allow-clear>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="customOrderName" label="客订名称:" label-col-flex="100px">
                <a-input v-if="showJu" v-model="form.a.customOrderName"/>
                <a-input v-else="showJu" v-model="form.a.customOrderName" readonly/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="hqDeliveryTime" label="总部交货日期:" label-col-flex="100px">
                <a-date-picker popup-container="html" v-model="form.a.hqDeliveryTime" style="width: 320px;"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="require" label="客户要求:" label-col-flex="100px">
                <a-input v-model="form.a.require"/>
              </a-form-item>
            </a-col>
          </a-row>


          <a-row :gutter="16">
            <a-col :span="4">
              <a-form-item field="customPoCode" label="客户PO号:" label-col-flex="100px">
                <a-input v-if="showJu" v-model="form.a.customPoCode"/>
                <a-input v-else="showJu" v-model="form.a.customPoCode" readonly/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="testCriterion" label="测试标准:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.testCriterion" allow-clear>
                  <a-option v-for="item of basicData.VerifyStandard" :value="item.id" :key="item.id"
                            :label="item.verifyStandard"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="machinType" label="加工类型:" label-col-flex="100px"
                           :validate-trigger="['change', 'blur']"
                           :rules="[{ required: true, message: '客户名称必填' }]">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.machinType" allow-clear
                          @change="dingID">
                  <a-option v-for="item of basicData.machinType" :value="item.machinType" :key="item.id"
                            :label="item.machinType"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="clientDocumentary" label="客户跟单:" label-col-flex="100px">
                <a-input v-if="showJu" v-model="form.a.clientDocumentary"/>
                <a-input v-else="showJu" v-model="form.a.clientDocumentary" readonly/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="marketingDeliveryTime" label="营销交货日期:" label-col-flex="100px">
                <a-date-picker popup-container="html" v-model="form.a.marketingDeliveryTime" style="width: 320px;"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="marketType" label="面料销售类型:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.marketType" allow-clear>
                  <a-option v-for="item of basicData.plusMaterial" :value="item.id" :key="item.id"
                            :label="item.plusMaterial"/>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="4">
              <a-form-item field="clientDyeCode" label="客户染整单号:" label-col-flex="100px">
                <a-input v-model="form.a.clientDyeCode"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="coloringIlluminant" label="对色光源:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.coloringIlluminant"
                          allow-clear>
                  <a-option v-for="item, index of basicData.coloringMatch" :value="index" :key="index"
                            :label="item.colourLight"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="orderNature" label="订单性质:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.orderNature" allow-clear>
                  <a-option v-for="item of basicData.orderNature" :value="item.id" :key="item.id"
                            :label="item.detailName"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="placeDepartment" label="下单部门:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.placeDepartment"
                          allow-clear>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="initialDeliveryTime" label="最初交货日期:" label-col-flex="100px">
                <a-date-picker popup-container="html" v-model="form.a.initialDeliveryTime" style="width: 320px;"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="circulatCardType" label="流转卡归类:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.circulatCardType"
                          allow-clear>
                  <a-option v-for="item of basicData.ExchangecalorieClassify" :value="item.id"
                            :key="item.id" :label="item.encodings"/>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="4">
              <a-form-item field="clientPlanOrderCode" label="客户计划单号:" label-col-flex="100px">
                <a-input v-model="form.a.clientPlanOrderCode"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="handDatum" label="手感资料:" label-col-flex="100px">
                <a-input v-model="form.a.handDatum"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="settlementFirm" label="结算公司:" label-col-flex="100px">
                <a-input v-model="form.a.settlementFirm" readonly/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="ultimatelyBuyer" label="最终买家:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.ultimatelyBuyer"
                          allow-clear>
                  <a-option v-for="item of basicData.custom" :value="item.id" :key="item.id"
                            :label="item.customName"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="urgentCategory" label="加急类型:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.urgentCategory"
                          allow-clear>
                  <a-option v-for="item of basicData.UrgentCategory" :value="item.id" :key="item.id"
                            :label="item.urgentCategory"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="remark" label="备注:" label-col-flex="100px">
                <a-input v-model="form.a.remark"/>
              </a-form-item>
            </a-col>
          </a-row>


          <a-row :gutter="16">
            <a-col :span="4">
              <a-form-item field="clientBillsType" label="客户单据类型:" label-col-flex="100px">
                <a-input v-model="form.a.clientBillsType"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="labelFormatCode" label="标签格式:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.labelFormatCode"
                          allow-clear>
                  <a-option v-for="item of basicData.labelFormat" :value="item.id" :key="item.id"
                            :label="item.labelFormat"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="settlementName" label="结算方式:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.settlementName"
                          allow-clear>
                  <a-option v-for="item of basicData.Calculation" :value="item.id" :key="item.id"
                            :label="item.settlementName"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="season" label="季节:" label-col-flex="100px">
                <a-select popup-container="html" v-if="showJu" :style="{ width: '320px' }" v-model="form.a.season"
                          allow-clear>
                  <a-option v-for="item of basicData.seasonSet" :value="item.id" :key="item.id"
                            :label="item.seasonName"/>
                </a-select>

                <a-select popup-container="html" v-else="showJu" :style="{ width: '320px' }" v-model="form.a.season"
                          allow-clear disabled>
                  <a-option v-for="item of basicData.seasonSet" :value="item.id" :key="item.id"
                            :label="item.seasonName"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="dyeAuditDate" label="染单审核时间:" label-col-flex="100px">
                <a-input v-model="form.a.dyeAuditDate"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="saleType" label="销售类型:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.saleType" allow-clear>
                  <a-option v-for="item of basicData.saleType" :value="item.id" :key="item.id"
                            :label="item.saleType"/>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="16">
            <a-col :span="4">
              <a-form-item field="clientProductionMode" label="客户生产方式:" label-col-flex="100px">
                <a-input v-model="form.a.clientProductionMode"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="informRemark" label="发货通知备注:" label-col-flex="100px">
                <a-input v-model="form.a.informRemark"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="account" label="业务员:" label-col-flex="100px">
                <a-select popup-container="html" :style="{ width: '320px' }" v-model="form.a.account" allow-clear>
                  <a-option v-for="item of basicData.hrEmployee" :value="item.id" :key="item.id"
                            :label="item.text"/>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="cause" label="交期更改原因:" label-col-flex="100px">
                <a-input v-model="form.a.cause"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="colourSum" label="颜色总数:" label-col-flex="100px">
                <a-input v-model="form.a.colourSum"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <a-tabs   :lazy-load="true" default-active-key="2" @change="guanxi">

          <a-tab-pane key="2" title="订单明细列表">
            <div class="my-tool-bar">
              <el-button type="success" :icon="CirclePlus" class="stbutenxz"
                         @click="planOrderDetailsAdd">新增
              </el-button>
            </div>
            <div style="height:15px;"></div>

            <AgGridVuesCopys style="height:400px" class="ag-theme-alpine" :columnDefs="tco"
                             :rowData="form.a.planOrderDetails" :defaultColDef="defaultColDef" :enableColResize="true"
                             rowSelection="multiple" @grid-ready="gridReadyeB">
            </AgGridVuesCopys>
          </a-tab-pane>

          <a-tab-pane key="3" title="总部坯布信息">
            <div class="my-tool-bar">
              <a-button type="primary" @click="countBu">查询</a-button>
            </div>
            <div style="height:15px;"></div>
            <!-- <a-table :columns="total" :data="form.a.planOderGreys" /> -->
            <AgGridVuesCopys style="height:35vh;" class="ag-theme-alpine" :columnDefs="total"
                             :rowData="form.a.planOderGreys" :defaultColDef="defaultColDef" rowSelection="multiple">
            </AgGridVuesCopys>
          </a-tab-pane>
          <a-tab-pane key="4" title="色号最新生产车间">
            <div class="my-tool-bar">
              <a-button type="primary" @click="colorChe">查询</a-button>
            </div>
            <div style="height:15px;"></div>
            <!-- <a-table :columns="colorCar" :data="form.a.planOrderWorkshop" /> -->
            <AgGridVuesCopys style="height:35vh;" class="ag-theme-alpine" :columnDefs="colorCar"
                             :rowData="form.a.planOrderWorkshop" :defaultColDef="defaultColDef" rowSelection="multiple">
            </AgGridVuesCopys>
          </a-tab-pane>
          <a-tab-pane key="5" title="管型设置">
            <div class="tjan">
              <div class="my-tool-bar" style="margin-bottom:10px">
                <el-button type="success" :icon="CirclePlus" class="stbutenxz"
                           @click="planorderCastAdd">新增
                </el-button>
              </div>
            </div>
            <AgGridVuesCopys style="height:400px" class="ag-theme-alpine" :columnDefs="tcy"
                             :rowData="form.a.planOrderCast" :defaultColDef="defaultColDef" :enableColResize="true"
                             rowSelection="multiple" @grid-ready="planorderReaGr">
            </AgGridVuesCopys>
          </a-tab-pane>

          <a-tab-pane key="1" title="客户要求">
            <div class="my-tool-bar">
              <el-button type="primary" :icon="CirclePlus" class="stbutencx"
                         @click="getBu">取布种客户要求
              </el-button>
            </div>
            <div style="height:15px;"></div>
            <!-- <a-table :columns="total" :data="form.a.planOderGreys" /> -->
            <AgGridVuesCopys style="height:35vh;" class="ag-theme-alpine" :columnDefs="InforRequirement"
                             :rowData="form.a.requirement" :defaultColDef="defaultColDef" rowSelection="multiple">
            </AgGridVuesCopys>
          </a-tab-pane>

        </a-tabs>
      </div>
    </a-drawer>

    <a-drawer :drawer-style="{ 'zIndex': 9999 }" placement="bottom" :mask-closable="false" width="100" height="100%"
              :visible="pageData.importAdd" unmountOnClose @ok="sideaOk" @cancel="sideaNo" cancel-text='关闭'
              ok-text='保存'>

      <template #title>
        <div style="position: absolute; right: 50px;">
          <!-- <Toolbar :items="['查询 ', '确定', 'Excel资料导入', '导出']" @add="addHandler" @import="importHandler"
                        @del="deleteHandler" @select="selectHandler" @export="exports" @excel="downloadHandler">
                    </Toolbar> -->
          <el-button plain :icon="Search" @click="guanxiCount">查询</el-button>
          <!-- <el-button plain @click="yesOrder">确定</el-button> -->
          <el-button plain :icon="CirclePlus" @click="downloadHandler">模板下载</el-button>
          <el-button plain :icon="CirclePlus" @click="importHandler">导入</el-button>
        </div>

        <div class="my-tool-bar">
          后台巨客户
          <!-- <el-button type="primary" :icon="CirclePlus" class="stbutencx"
                        @click="importHandler">导入后台巨客户</el-button> -->
          <!-- <el-button type="primary" :icon="CirclePlus" class="stbutencx"
                        @click="importHandler">导入后台巨客户按钮</el-button> -->
          <!-- <el-button type="primary" :icon="CirclePlus" class="stbutencx" @click="downloadHandler">模板下载</el-button>
                    <el-button type="primary" :icon="CirclePlus" class="stbutencx" @click="yesOrder">确定</el-button> -->
        </div>
      </template>
      <div>
        <a-form :model="guanxiForm">
          <a-row :gutter="16">
            <a-col :span="4">
              <a-form-item label="客户订单号:" label-col-flex="100px">
                <a-input v-model="guanxiForm.customOrderCode"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="clothCode" label="布号:" label-col-flex="100px">
                <!-- <el-select v-model="guanxiForm.clothCode" filterable @click="selectChange">
                                    <el-option v-for="item in optionsList" :key="item.id" :label="item.clothCode"
                                        :value="item.clothCode" />
                                </el-select> -->
                <a-select popup-container="html" :loading="loading" :allowClear="true" @search="clothCodeSearch"
                          v-model="guanxiForm.clothCode" :filter-option="false" allow-search
                          @focus="clothCodeBoSel" style="width:270px;"
                          :trigger-props="{ autoFitPopupMinWidth: true }">
                  <a-option v-for="item in optionsList" :label="item.clothCode" :value="item.clothCode">{{
                      item.clothCode + '————' + item.brandName
                    }}
                  </a-option>
                </a-select>


              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="productName" label="品名:" label-col-flex="100px">
                <!-- <el-select v-model="guanxiForm.productName" filterable @click="selectPin">
                                    <el-option v-for="item in pinList" :key="item.id" :label="item.brandName"
                                        :value="item.brandName" />
                                </el-select> -->
                <a-select popup-container="html" :loading="loading" :allowClear="true" @search="clothCodeSearchA"
                          v-model="guanxiForm.productName" :filter-option="false" allow-search
                          @focus="clothCodeBoSelA" style="width:270px;"
                          :trigger-props="{ autoFitPopupMinWidth: true }">
                  <a-option v-for="item in pinList" :label="item.brandName" :value="item.brandName">{{
                      item.brandName + '————' + item.clothCode
                    }}
                  </a-option>
                </a-select>

              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="colorCode" label="色号:" label-col-flex="100px">
                <a-input v-model="guanxiForm.colorCode"/>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-form-item field="colorName" label="色称:" label-col-flex="100px">
                <a-input v-model="guanxiForm.colorName"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="height:15px;"></div>
      <a href="#" style="color:blue">订单明细列表</a>
      <div style="height:10px;"></div>

      <a-tabs   :lazy-load="true" default-active-key="1" @change="mobanYn">
        <a-tab-pane key="1" title="可用数据">
          <AgGridVuesCopys style="height:72vh;" class="ag-theme-alpine" :columnDefs="hugeCustomer"
                           :rowData="orderCustomList.list" :defaultColDef="defaultColDef" rowSelection="multiple"
                           @grid-ready="gridReadyB">
          </AgGridVuesCopys>
        </a-tab-pane>
        <a-tab-pane key="2" title="已用数据">
          <AgGridVuesCopys style="height:72vh;" class="ag-theme-alpine" :columnDefs="hugeCustomer"
                           :rowData="orderCustomList.list" :defaultColDef="defaultColDef" rowSelection="multiple"
                           @grid-ready="gridReadyC">
          </AgGridVuesCopys>
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts">
import {post, get} from "@/api/http";
import {Search, CirclePlus, Delete, EditPen} from "@element-plus/icons-vue";
import {
  useTable,
  useRowKey,
  useTableColumn,
  usePagination,
  useRowSelection,
} from "@/hooks/table";
import tagRender from '@/components/SelectRenderer.vue'
import cheCk from '@/views/Aps/planOrderA/cheCkBoxComm/cheCk.vue'                               //快反需求
import cheCkBumpWhite from '@/views/Aps/planOrderA/cheCkBoxComm/cheCkBumpWhite.vue'             //撞白
import CheCkdialPrinting from '@/views/Aps/planOrderA/cheCkBoxComm/CheCkdialPrinting.vue'       //拔印
import checheCkEdgeCK from '@/views/Aps/planOrderA/cheCkBoxComm/cheCkEdge.vue'                  //珠地边
import cheCkFirstRate from '@/views/Aps/planOrderA/cheCkBoxComm/cheCkFirstRate.vue'             //一等品
import cheCKneedEnterPot from '@/views/Aps/planOrderA/cheCkBoxComm/cheCKneedEnterPot.vue'       //需进缸
import cheCkrcInfo from '@/views/Aps/planOrderA/cheCkBoxComm/cheCkrcInfo.vue'                   // 白色RC处理
import cheCkrepeatPack from '@/views/Aps/planOrderA/cheCkBoxComm/cheCkrepeatPack.vue'           //重打包
import cheCkstainResistance from '@/views/Aps/planOrderA/cheCkBoxComm/cheCkstainResistance.vue'//白色防沾处理
import cheCktakeDyeFee from '@/views/Aps/planOrderA/cheCkBoxComm/cheCktakeDyeFee.vue'           //收取染费
import cheCkwetRubbing from '@/views/Aps/planOrderA/cheCkBoxComm/cheCkwetRubbing.vue'           //问擦提升

import selectGreyCode from '@/views/Aps/planOrderA/selectList/selectGreyCode.vue'           //问擦提升
import selectGreyName from '@/views/Aps/planOrderA/selectList/selectGreyName.vue'           //问擦提升
import selectColorCode from '@/views/Aps/planOrderA/selectList/selectColorCode.vue'         //色号
import selectColorName from '@/views/Aps/planOrderA/selectList/selectColorName.vue'         //色称
import selectAffirmColor from '@/views/Aps/planOrderA/selectList/selectAffirmColor.vue'
import selectGreyType from '@/views/Aps/planOrderA/selectList/selectGreyType.vue'
import selectTrimCharges from '@/views/Aps/planOrderA/selectList/selectTrimCharges.vue'
import selectDyeingType from '@/views/Aps/planOrderA/selectList/selectDyeingType.vue'
import selectColorDepth from '@/views/Aps/planOrderA/selectList/selectColorDepth.vue'


import {ref, reactive, onMounted, onActivated, onUnmounted, watch} from "vue";
import Toolbar from "@/components/Toolbar.vue";
import {Form, Message, Modal, Pagination} from "@arco-design/web-vue";
import {FormInstance} from "@arco-design/web-vue/es/form";
import emitter from "@/hooks/useEventBus";
import validate from "@/hooks/useValidate";
//import { baseURL } from '../../../api/axios.config'
import axios from "axios";
import filedownload from 'js-file-download'
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import {} from "ag-grid-vue3";
//import aag from "./AGbut"
//import aag from "./agbuut.vue"
interface ClothSet {
  id?: any;
  serialNumber?: number | undefined,
  mercery?: string | undefined;
  deleteState?: any
  remark?: string | undefined;
  productionMode?: string | undefined;
  createName?: string | undefined;
  createTime?: string | undefined;
  updateName?: string | undefined;
  updateTime?: string | undefined;
}

interface pagings {
  size: number | string,
  total: number | string,
}

export default {
  name: "productionMode",
  setup() {
    const headerShow = ref<boolean>(true)
    const showJu = ref<boolean>(true)
    let headerShowS = ref<boolean>(true)

    const trigger = ref('1');

    //查询表单
    const fromList = reactive({
      endTime: '',
      ColorId: '',
      ColorName: '',
      customName: "",
      clientDyeCode: "",
      genDanCode: "",
      dyType: '',
      account: '',

    })
    //查询

    const scrollbar = ref(true)
    const pages = ref(1);
    const paging: pagings = reactive({
      size: 10,
      total: 30,
    })

    function doRefresh(data: any) {
      pageData.pageLoading = true
      post({
        url: "/aps/planOrder/getPage",
        data: {
          page: pages.value,
          limit: paging.size,
          auditState: data
        },
      }).then(({data, code}: any) => {
        if (code === 200) {
          //  console.log(data, "结果");
          tableCon.tableConter = data.data;
          tableConA.tableConter = data.data;
          paging.total = data.total;
          //     // pagination.setTotalSize(data.total);

        }
      })
          .catch(console.log).finally(() => {
        pageData.pageLoading = false
      })
    }

    const {selectedRowKeys, onSelectionChange} = useRowSelection();
    const pagination = usePagination(doRefresh);
    const table = useTable();
    const rowKey = useRowKey("id");
    //检验表单是否含有中文的方法
    const hasChiese = validate.includeChinese;

    /************************************** */

    let columnDefs = [
      {
        headerName: '',//选择列头部显示的文字，可以为空
        checkboxSelection: true,//设置为ture显示为复选框
        headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
        pinned: 'left', //固定再左边
        width: 50 //列的宽度
      },
      {headerName: "下单日期", field: "authorizedStrengthTime",},
      {headerName: "订单号", field: "orderCode"},
      {headerName: "客户PO", field: "customPoCode"},
      {headerName: "客户名称", field: "customName",},
      {headerName: "客订名称", field: "customOrderName"},
      {headerName: "销售类型", field: "saleType"},

      {headerName: "客户染整单号", field: "'clientDyeCode'",},
      {headerName: "加工类型", field: "machinType"},
      {headerName: "客户计划单号", field: "customOrderName"},
      {headerName: "下单部门", field: "placeDepartment",},
      {headerName: "布号", field: "clothCode"},
      {headerName: "品名", field: "productName"},

      {headerName: "色号", field: "colorCode",},
      {headerName: "色称", field: "colorName"},
      {headerName: "确认色", field: "affirmColor"},
      {headerName: "坯布编号", field: "greyCode",},
      {headerName: "坯布名称", field: "greyName"},
      {headerName: "匹数", field: "houseNum"},

      {headerName: "成品重量（KG）", field: "finishedWeight",},
      {headerName: "投染重量（KG）", field: "castDyeWeight"},
      {headerName: "投染长度（M）", field: "castDyeLength"},
      {headerName: "成品长度（M）", field: "finishedLength",},
      {headerName: "对色资料", field: "contrastColor"},
      {headerName: "染色类型", field: "dyeingType"},

      {headerName: "布种类别", field: "greyType",},
      {headerName: "颜色深浅", field: "colorDepth"},
      {headerName: "整理收费项目", field: "trimCharges"},
      {headerName: "费用构成", field: "feeConstitute",},
      {headerName: "最终交货日期", field: "lastDeliveryTime"},
      {headerName: "总部交货日期", field: "hqDeliveryTime"},

      {headerName: "交货日间", field: "deliveryTime",},
      {headerName: "成分", field: "ingredient"},
      {headerName: "纱支", field: "yarnCount"},
      {headerName: "有效门幅（cm）", field: "efficacious",},
      {headerName: "克重（g/m2）", field: "gWeight"},
      {headerName: "状态", field: "email"},
      {headerName: "操作",},

    ];
    const rowData = [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxster", price: 72000},
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxster", price: 72000},
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxster", price: 72000},
    ];
    const defaultColDef = {
      sortable: true,
      filter: true,
      //  flex: 1,
      resizable: true,
    };

    //审核
    function changeGetS(auditState: Number) {
      var arr = [];
      let s = ''
      if (trigger.value == '1') {
        if (auditState == 1) {
          console.log(s)
          arr = gridOption.value.getSelectedRows().map((item) => {
            s = "确认审核选中的数据?"
            return item.id
          })
          console.log(s)
        } else {
          arr = gridOptionA.value.getSelectedRows().map((item) => {
            s = "确认反审选中的数据?"
            return item.id
          })
        }

      } else {
        if (auditState == 1) {
          arr = gridOption.value.getSelectedRows().map((item) => {
            s = "确认审核选中的数据?"
            return item.id
          })
        } else {
          arr = gridOptionA.value.getSelectedRows().map((item) => {
            s = "确认反审选中的数据?"
            return item.id
          })
        }

      }

      if (arr.length > 0) {
        let data = []
        data = arr.map((item) => {
          return {id: item, auditState: auditState}
        })
        Modal.confirm({
          title: "系统提示",
          content: s,
          onOk() {
            post({
              url: "/aps/planOrder/audit",
              data: data,
            }).then(({code, data, message}: any) => {
              // console.log(code,"删除的状态码")
              if (code === 200) {
                Message.success({
                  content: "审核成功",
                  duration: 5000,
                });
                pages.value = 1;
                if (data.auditState == 1) {
                  doRefresh(0);
                } else {
                  doRefresh(1);
                }

              } else {
                Message.error({
                  content: message,
                  duration: 5000,
                });
              }
            });
          },
        });
      } else {
        Message.warning({
          content: "请选择要审核的数据",
          duration: 5000,
        });
        return;
      }
    }

    let shen = ref(0);

    function changeGet(key: any) {
      trigger.value = key
      console.log(key)
      if (key == 0) {
        shen.value = 0
        doRefresh(shen.value)
      } else {
        shen.value = 1
        doRefresh(shen.value)
      }
    };

    let ta: any[] = columnDefs.slice(0, 35)
    let tc: any[] = columnDefs.map((o) => {
      //let obj = {}
      if (o.headerName === '操作') {
        o['resizable'] = false
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "right"
        o["width"] = 80
        o['cellRenderer'] = {
          template: `
            <el-button style="color:#165dff;" link @click="a">修改</el-button>`,
          setup(props: any) {

            const a = () => {
              editHandler(props.params.data)
            }
            return {
              a
            }
          }

        }
      }
      return o
    })
    const gridOption = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
    }
    const gridOptionA = ref()
    const gridReadyA = (params: any) => {
      gridOptionA.value = params.api
    }


    const gridOptionB = ref()
    const gridReadyB = (params: any) => {
      gridOptionB.value = params.api
    }

    const gridOptionC = ref()
    const gridReadyC = (params: any) => {
      gridOptionC.value = params.api
    }

    let yesOrderList: any = []
    const yesOrder = () => {

      yesOrderList = gridOptionB.value.getSelectedRows()
      if (trigger.value == '1') {
        gridOptionB.value.getSelectedRows().map((item) => {
          // return item.customOrderCode
          return orderCustomList.list.map((se, index) => {
            if (se.id === item.id) {
              orderCustomList.list.splice(index, 1)
              setTimeout(function () {
                gridOptionB.value.setRowData(orderCustomList.list);
              }, 0)
            }
          })
        })
      } else {
        gridOptionB.value.getSelectedRows().map((item) => {
          return item.customOrderCode
        })
      }

      console.log(yesOrderList, 'ss')
      baocun(yesOrderList)

    }


    //删除
    const deleteBzyq = (record: ClothSet) => {
      for (var key in record) {
        dataForm[key] = record[key]
      }
      pageData.sideTitle = '删除'
      pageData.showAdd = true
    };

    let xuahoZiZeng = 0

    function xuHaoFun(params: any) {
      params.node.rowIndex = params.node.rowIndex + 1
      return params.node ? params.node.rowIndex : null
    }

    const InformationEnglishbt = [
      {
        headerName: "序号", width: 100,
        field: 'serialNo'

      },
      {
        headerName: "管型", field: "castNum",
        editable: true,
        cellEditor: "agSelectCellEditor",
        cellEditorParams: {values: [6, 5, 4, 3, 2, 1]}
      },
      {headerName: "缸数", field: "retainingNum"},
      {headerName: "操作",},
    ];

    //客户要求
    const InforRequirement = [
      {headerName: "要求项目", field: "requiredItems",},
      {headerName: "本次要求", field: "nowRequirement",},
      {headerName: "默认要求", field: "defaultRequirement"},
      {headerName: "布种", field: "greyType"},
      {headerName: "单位", field: "unit"},
      {headerName: "备注", field: "remark"},

    ];

    let tcy: any[] = InformationEnglishbt.map((o) => {
      //let obj = {}
      if (o.headerName === '操作') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "right"
        o["width"] = 70
        o['cellRenderer'] = {
          template: `
            <el-button style="color:red;" link @click="s">删除</el-button>`,
          setup(props: any) {
            const s = () => {
              form.a.planOrderCast.splice(props.params.rowIndexdex, 1)
              setTimeout(function () {
                planorderCastGr.value.setRowData(form.a.planOrderCast);
              }, 0)
            }
            return {
              s
            }
          }

        }
      }
      return o
    })

    const form = reactive(
        {
          a: {
            finance: "",                             //财务参数
            orderCode: "",                          //订单号
            authorizedStrengthTime: Date.now(),     //编制日期
            productionMode: "",                     //生产方式
            customName: "",                         //客户名称
            customOrderCode: "",                     //客户订单号
            workshop: "",                            //生产车间
            salesDepartment: "",                     //业务部
            customOrderName: '',                     //客户订单名称
            lastDeliveryTime: '',                    //最终交货日期
            hqDeliveryTime: '',                      //总部交货日期
            customPoCode: '',                        //客户PO号
            testCriterion: '',                       //测试标准
            machinType: '',                          //加工类型
            clientDocumentary: '',                   //客户跟单
            marketingDeliveryTime: '',               //营销交货日期
            clientDyeCode: '',                       //客户染整单号
            coloringIlluminant: '',                  //对色光源
            orderNature: '',                         //订单性质
            placeDepartment: '',                     //下单部门
            initialDeliveryTime: '',                 //最初交货日期
            clientPlanOrderCode: '',                 //客户计划单号
            handDatum: '',                           //手感资料
            settlementFirm: '粤隆纺织',               //结算公司
            ultimatelyBuyer: '',                     //最终买家
            urgentCategory: '',                      //加急类别
            clientBillsType: '',                     //客户单据类型
            labelFormatCode: '',                     //标签格式
            settlementName: '',                      //结算方式
            season: '',                              //季节
            dyeAuditDate: '',                        //染单审核时间
            clientProductionMode: '',                //客户生产方式
            informRemark: '',                        //发货通知备注
            crockCost: 1,                            //小缸费
            account: '',                             //账户
            cause: '',                               //交期变更原因
            require: '',                             //客户要求
            circulatCardType: '',                    //流转卡归类
            encodings: '',                           //流转卡归类编码
            saleType: '',                            //销售类型
            colourSum: 1,                             //颜色总数
            constitute: '',                          //小缸费构成
            marketType: '',                          //面料销售类型
            remark: '',                              //备注
            planOrderDetails: [],
            requirement: [{
              requiredItems: "0",
              nowRequirement: "",
              defaultRequirement: "",
              unit: "",
              greyType: "",
              remark: "",
            }],
            planOderGreys: [],
            planOrderWorkshop: [],
            planOrderCast: []


          }
        }
    );
    const columnsOrder = [
      {
        headerName: "快反需求状态",
        field: "needState",

      },
      {headerName: "布号", field: "clothCode",},
      {headerName: "品名", field: "productName"},

      {
        headerName: "色号", field: "colorCode",
      },
      {headerName: "色称", field: "colorName"},
      {headerName: "确认色", field: "affirmColor",},

      {
        headerName: "坯布编号", field: "greyCode",
        // editable: true,
        // cellEditor: "agSelectCellEditor",
        // cellEditorParams: function () {
        //     let o = { values: ['1', '2'] }
        //     post({
        //         url: "/wms/BlankStock/getFieldValue",
        //         data: {
        //             greyCode: ''
        //         }
        //     }).then(({ data, code }: any) => {
        //         // console.log(data,"下拉返回");
        //         if (code === 200) {
        //             for (let i = 0; i < data.length; i++) {
        //              o.values[i] = data[i].greyCode
        //             }

        //         } else {
        //             Message.error({
        //                 content: "查询失败！",
        //                 duration: 5000,
        //             });
        //         }
        //     });
        //     return o

        // }
      },


      {headerName: "坯布名称", field: "greyName",},
      {headerName: "匹数", field: "houseNum", editable: true,},

      {headerName: "成品重量", field: "finishedWeight", editable: true,},
      {headerName: "投染重量", field: "castDyeWeight", editable: true,},
      {headerName: "投染长度", field: "castDyeLength", editable: true,},

      {headerName: "成品长度", field: "finishedLength", editable: true,},
      {
        headerName: "对色资料",
        field: "contrastColor",
        cellEditor: "agSelectCellEditor",
        editable: true,
        cellEditorParams: {values: [1, 2]}
      },
      {headerName: "珠地边", field: "edge"},
      {headerName: "撞白", field: "bumpWhite",},
      {headerName: "一等品", field: "firstRate",},
      {headerName: "拔印", field: "dialPrinting"},

      {headerName: "抗黄处理", field: "resistanceYellow", editable: true,},
      {headerName: "耐氢提升", field: "chlorineResistant", editable: true,},
      {headerName: "温擦提升", field: "wetRubbing"},

      {headerName: "白色RC处理", field: "rcInfo",},
      {headerName: "白色防粘处理", field: "stainResistance",},
      {
        headerName: "染色类型",
        field: "dyeingType",
      },

      {
        headerName: "布种类别",
        field: "greyType",
      },
      {
        headerName: "工艺代码",
        field: "craftCode",
        editable: true,
        cellEditor: "agSelectCellEditor",
        cellEditorParams: {values: [1, 2]}
      },
      {
        headerName: "颜色深浅",
        field: "colorDepth",
      },

      {
        headerName: "整理收费项目",
        field: "trimCharges",
      },
      {headerName: "需进缸", field: "needEnterPot"},
      {headerName: "合染类型", field: "joinDyeType"},

      {headerName: "收取染费", field: "takeDyeFee",},
      {headerName: "重打包", field: "repeatPack",},
      {headerName: "计件克重", field: "byPieceBreadth"},

      {headerName: "染色单价", field: "dyeUnitPrice",},
      {headerName: "总部染色单价", field: "hqUnitPrice", editable: true,},
      {headerName: "特整单价", field: "veryPrice", editable: true,},

      {headerName: "胶袋单价", field: "polybagPrice", editable: true,},
      {headerName: "纸管单价", field: "tubePrice", editable: true,},
      {headerName: "税率", field: "taxRate", editable: true,},

      {
        headerName: "费用构成",
        field: "feeConstitute",
      },
      {headerName: "齐坯日期", field: "neatEmbryoTime",},
      {headerName: "交货日期", field: "deliveryTime"},

      {headerName: "成分", field: "ingredient"},
      {headerName: "纱支", field: "yarnCount",},
      {headerName: "备坯订单号", field: "embryoOrderNumber"},

      {headerName: "客户布号", field: "customClothCode", editable: true,},
      {headerName: "客户品名", field: "customProductName", editable: true,},
      {headerName: "客户色号", field: "customColorCode", editable: true,},

      {headerName: "客户色称", field: "customColorName", editable: true,},
      {headerName: "有效门幅（CM）", field: "efficacious",},
      {headerName: "克重（M2）", field: "gramWeight",},

      {headerName: "门幅上限", field: "upperLimit", editable: true,},
      {headerName: "门幅下限", field: "lowerLimit", editable: true,},
      {headerName: "克重上限", field: "gramUpperLimit", editable: true,},

      {headerName: "克重下限", field: "gramLowerLimit", editable: true,},
      {headerName: "开卡缸数", field: "numberCylinders",},
      {headerName: "款号", field: "styleNumber"},

      // {
      //     headerName: "快反需求人员",
      //     field: "needPersonnel",
      // },
      {headerName: "快反需求日期", field: "needTime", editable: true,},

      {headerName: "总部色卡号", field: "hqCardNumber",},
      {headerName: "原色号", field: "rawColorCode",},
      {headerName: "原色称", field: "rawColorName",},

      {headerName: "币种", field: "currency"},
      {headerName: "结算重量", field: "closeAccountWeight",},
      {headerName: "结算单位", field: "closeAccountUnit"},
      {headerName: "制版费", field: "makeEditionCost"},

      {headerName: "操作",},
    ];

    let tco: any[] = columnsOrder.map((o) => {
      //let obj = {}
      if (o.headerName === '操作') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "right"
        o["width"] = 70
        o['cellRenderer'] = {
          template: `
            <el-button style="color:red;" link @click="s">删除</el-button>`,
          setup(props: any) {
            const s = () => {
              // deleteBzyq(props.params.rowIndex)
              form.a.planOrderDetails.splice(props.params.rowIndexdex, 1)
              setTimeout(function () {
                gridOptionyB.value.setRowData(form.a.planOrderDetails);
              }, 0)
            }
            return {
              s
            }
          }

        }
      }

      if (o.headerName == '快反需求状态') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = cheCk
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].needState = params.data.needState
            if (form.a.planOrderDetails[params.rowIndex].needState == 0) {
              columnsOrder.delete({headerName: "快反需求人员", field: "needPersonnel"})
              scrollbar.value = true
            }
            if (form.a.planOrderDetails[params.rowIndex].needState == 1) {
              if (scrollbar.value == true) {
                columnsOrder.push({headerName: "快反需求人员", field: "needPersonnel"})
                scrollbar.value = false
              }

            }
            console.log(columnsOrder)
          }
        }
      }


      if (o.headerName == '布号') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = tagRender
        o['cellRendererParams'] = {
          color: (params: any, data: any,) => {
            // form.a.planOrderDetails[data.node.childInde].clothCode = data.data.clothCode

            Object.keys(form.a.planOrderDetails[params.rowIndex]).forEach((key) => {
              Object.keys(data[0]).forEach((keyP) => {
                if (key == keyP) {
                  form.a.planOrderDetails[params.rowIndex][key] = data[0][key]
                }
              })
            })
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }

      if (o.headerName == '坯布编号') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectGreyCode
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].greyCode = params.data.greyCode
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }

      if (o.headerName == '坯布名称') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectGreyName
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].greyName = params.data.greyName
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }
      if (o.headerName == '色号') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectColorCode
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].colorCode = params.data.colorCode
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }

      if (o.headerName == '色称') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectColorName
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].colorName = params.data.colorName
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }
      if (o.headerName == '确认色') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectAffirmColor
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].affirmColor = params.data.affirmColor
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }
      if (o.headerName == '染色类型') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectDyeingType
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].dyeingType = params.data.dyeingType
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }
      if (o.headerName == '布种类别') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectGreyType
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].greyType = params.data.greyType
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }
      if (o.headerName == '整理收费项目') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectTrimCharges
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].trimCharges = params.data.trimCharges
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }
      if (o.headerName == '费用构成') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectTrimCharges
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].feeConstitute = params.data.feeConstitute
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }

      if (o.headerName == '颜色深浅') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 300
        o['cellRenderer'] = selectColorDepth
        o['cellRendererParams'] = {
          color: (params: any) => {
            form.a.planOrderDetails[params.rowIndex].colorDepth = params.data.colorDepth
            setTimeout(function () {
              gridOptionyB.value.setRowData(form.a.planOrderDetails);
            }, 0)
          }
        }
      }
      if (o.headerName == '珠地边') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = checheCkEdgeCK
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].edge = params.data.edge
          }
        }
      }
      if (o.headerName == '撞白') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = cheCkBumpWhite
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].bumpWhite = params.data.bumpWhite

          }
        }
      }
      if (o.headerName == '一等品') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = cheCkFirstRate
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].cheCkFirstRate = params.data.cheCkFirstRate

          }
        }
      }
      if (o.headerName == '拔印') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = CheCkdialPrinting
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].dialPrinting = params.data.dialPrinting
          }
        }
      }

      if (o.headerName == '温擦提升') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = cheCkwetRubbing
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].wetRubbing = params.data.wetRubbing

          }
        }
      }

      if (o.headerName == '白色RC处理') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = cheCkrcInfo
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].rcInfo = params.data.rcInfo

          }
        }
      }

      if (o.headerName == '白色防粘处理') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = cheCkstainResistance
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].stainResistance = params.data.stainResistance

          }
        }
      }

      if (o.headerName == '需进缸') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = cheCKneedEnterPot
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].needEnterPot = params.data.needEnterPot
          }
        }
      }

      if (o.headerName == '收取染费') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = cheCktakeDyeFee
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].takeDyeFee = params.data.takeDyeFee

          }
        }
      }

      if (o.headerName == '重打包') {
        o['resizable'] = true
        o['filter'] = false
        o['sortable'] = false
        o["pinned"] = "light"
        o["width"] = 150
        o['cellRenderer'] = cheCkrepeatPack
        o['cellRendererParams'] = {
          color: (params: any,) => {
            form.a.planOrderDetails[params.rowIndex].repeatPack = params.data.repeatPack
          }
        }
      }

      // if (o.headerName == '重打包') {
      //     o['resizable'] = false
      //     o['filter'] = false
      //     o['sortable'] = false
      //     o["pinned"] = "light"
      //     o["width"] = 150
      //     o['cellRenderer'] = {
      //         template: `<div>
      //             <a-checkbox @click="s"></a-checkbox>
      //                   </div>`,
      //         setup(props: any) {
      //             const s = () => {
      //                 form.a.planOrderDetails[props.params.rowIndex].repeatPack = form.a.planOrderDetails[props.params.rowIndex].repeatPack == 0 ? 1 : 0
      //             }
      //             return {
      //                 s
      //             }
      //         }

      //     }
      // }

      return o
    })

    const headerName = ref('')

    const colorCar = [
      {
        headerName: '',//选择列头部显示的文字，可以为空
        checkboxSelection: true,//设置为ture显示为复选框
        headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
        pinned: 'left', //固定再左边
        width: 50 //列的宽度
      },
      {headerName: "订单号", field: "planOrderCode",},
      {headerName: "布号", field: "clothCode"},
      {headerName: "品名", field: "productName"},
      {headerName: "色号", field: "colorCode",},
      {headerName: "色称", field: "colorName"},
      {headerName: "流转卡号", field: "flowCardCode"},


      {headerName: "等待工序", field: "waitProcess",},
      {headerName: "开卡日期", field: "createOrderDate"},
      {headerName: "生产车间", field: "workshop"},
      {headerName: "匹数", field: "houseNum",},
      {headerName: "制单人", field: "createOrde"},
      {headerName: "备注", field: "remark"},


    ];
    const total = [
      {
        headerName: '',//选择列头部显示的文字，可以为空
        checkboxSelection: true,//设置为ture显示为复选框
        headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
        pinned: 'left', //固定再左边
        width: 50 //列的宽度
      },
      {headerName: "坯布编号", field: "greyCode",},
      {headerName: "坯布名称", field: "greyName"},
      {headerName: "纱批", field: "yarnHouseNum"},
      {headerName: "匹数", field: "houseNum",},
      {headerName: "重量", field: "weight"},
      {headerName: "米数", field: "lenghtNum"},
      {headerName: "布号", field: "clothCode",},
      {headerName: "品名", field: "productName"},
      {headerName: "色号", field: "colorCode"},
      {headerName: "色称", field: "colorName",},
      {headerName: "门幅", field: "larghezza"},
    ];
    const hugeCustomer = [
      {
        headerName: '',//选择列头部显示的文字，可以为空
        checkboxSelection: true,//设置为ture显示为复选框
        headerCheckboxSelection: true, //表头是否也显示复选框，全选反选用
        pinned: 'left', //固定再左边
        width: 50 //列的宽度
      },
      {headerName: "客户订单号", field: "customOrderCode",},
      {headerName: "卖家名称", field: "buyerName"},
      {headerName: "客户名称", field: "customOrderName"},
      {headerName: "客户跟单", field: "clientDocumentary",},
      {headerName: "下单日期", field: "authorizedStrengthTime"},
      {headerName: "交货日期", field: "deliveryTime"},
      {headerName: "季节", field: "season",},
      {headerName: "款号", field: "styleNumber"},
      {headerName: "布号", field: "colorCode"},
      {headerName: "品名", field: "productName",},
      {headerName: "系统品名", field: "systemProductName",},
      {headerName: "门幅", field: "larghezza"},
      {headerName: "克重", field: "gWeight"},
      {headerName: "颜色代码", field: "colorNum"},
      {headerName: "色号", field: "colorCode"},
      {headerName: "色称", field: "colorName"},
      {headerName: "确认色", field: "affirmColor"},
      {headerName: "客户色称", field: "customColorName"},
      {headerName: "对色资料", field: "contrastColor"},
      {headerName: "测试标准", field: "testCriterion"},
      {headerName: "成分", field: "ingredient"},
      {headerName: "po号", field: "customPoCode"},
      {headerName: "投染重量", field: "castDyeWeight"},
      {headerName: "投染码数", field: "castDyeYardage"},
      {headerName: "投染磅数", field: "castDyePound"},

      {headerName: "成品磅数", field: "finishedClothPound"},
      {headerName: "备注", field: "remark"},
      {headerName: "导入人", field: "importPerson"},
      {headerName: "导入日期", field: "importDate"},
      {headerName: "客户品名", field: "customProductName"},
    ];

    /***************************************** */
    const tableCon = reactive({
      tableConter: [],
    });
    const tableConA = reactive({
      tableConter: [],
    });
    //页改变
    const pagingChange = (current: number) => {
      // console.log(current, "分页改变");
      pages.value = current;
      console.log(shen.value)
      doRefresh(shen.value);
    }
    //页条改变
    const pagingSizeChange = (pageSize: number) => {
      //  console.log(pageSize, "条数")
      pages.value = 1;
      paging.size = pageSize;
      doRefresh(shen.value);
    }
    const alone = (rowKeys, rowKey, record) => {
      // console.log(rowKeys);
      // console.log(rowKey);
      // console.log(record);
    }
    const alonell = (selected, selectedRows,) => {
      // console.log(selected);
      // console.log(selectedRows);
    }
    const scroll = {
      x: 2000,
      y: 200
    };
    const tablediv = ref(null)
    const pageData = reactive<{
      clothList: ClothSet[]
      showAdd: boolean
      sideTitle: string
      dropDownData: any
      pageLoading: boolean,
      theight: number,
      tablediv: any,
      rHeight: number | undefined,
      importAdd: boolean
    }>({
      clothList: [],
      showAdd: false,
      sideTitle: "计划订单",
      dropDownData: "",
      pageLoading: false,
      theight: 0,
      tablediv: null,
      rHeight: 0,
      importAdd: false
    });
    //下拉框得到焦点
    const focusSel = () => {
      selCxAll({productionMode: ""})
    }
    //下拉数据
    const options = ref<any>(pageData.clothList);
    const loading = ref(false);
    const handleSearch = (value: any) => {
      if (value) {
        const ob = {productionMode: value}
        loading.value = true;
        selCxAll(ob);
        options.value = pageData.clothList;
        loading.value = false;
      } else {
        options.value = []
      }
    };

    //下拉框查询
    function selCxAll(val: any) {
      post({
        url: "/aps/ProductionMode/getFieldValue",
        data: val
      }).then(({data, code, message}: any) => {
        // console.log(data,"下拉返回");
        if (code === 200) {
          pageData.clothList = data;
        } else {
          Message.error({
            content: message,
            duration: 5000,
          });
        }
      });
    }

    onMounted(() => {
      getProductionMode();
      doRefresh(shen.value);

    });
    //查询
    const selectHandler = () => {
      pages.value = 1;
      doRefresh(shen.value);

      // console.log(paging, 5555555555555)
      // console.log(pages.value, 999999999999)
    }
    const queryData = reactive({
      clothType: "",
    });
    const editHandler = (record: any) => {
      // initCum();
      //详情
      post({
        url: "/aps/planOrder/getPlanOrderDetail",
        data: {
          id: record.id
        }
      }).then(({data, code, message}: any) => {
        if (code === 200) {
          console.log(data, 'aaaaaaaaa', record)
          form.a = data;
        } else {
          Message.error({
            content: message,
            duration: 5000,
          });
        }
      });

      pageData.sideTitle = '修改资料'


      pageData.showAdd = true
    };

    const addHandler = () => {
      for (var key in dataForm) {
        if (key === "id") {
          dataForm[key] = null;
        } else if (key == 'serialNumber') {
          dataForm[key] = 0;
        } else {
          dataForm[key] = "";
        }

      }
      pageData.showAdd = true;
      initCum()
      pageData.sideTitle = "计划订单";
    };
    const dataForm = reactive<ClothSet>({
      id: null,
      remark: "",
      productionMode: ""
    });
    const formRef = ref<FormInstance>();
    const sideOk = () => {
      showJu.value = true
      formRef.value?.validate().then((err) => {
        if (!err) {

          if (pageData.sideTitle === "计划订单") {
            post({
              url: "/aps/planOrder/insert",
              data: form.a,
            }).then((res: any) => {
              // console.log(res,"新增返回结果");
              if (res.code === 200) {
                formRef.value?.resetFields();
                pageData.showAdd = false;
                Message.success({
                  content: "新增成功",
                  duration: 5000,
                });
                doRefresh(shen.value);
              } else {
                Message.error({
                  content: res.message,
                  duration: 5000,
                });
              }

            });
          } else {

            post({
              url: "/aps/planOrder/update",
              data: form.a,
            }).then((res: any) => {
              // console.log(res, "修改返回");
              if (res.code === 200) {
                formRef.value?.resetFields();
                pageData.showAdd = false;

                Message.success({
                  content: "修改成功",
                  duration: 5000,
                });
                doRefresh(shen.value);
              } else {
                Message.error({
                  content: res.message,
                  duration: 5000,
                });
              }

            });
          }
        }

      })

      // }
      // });
    };

    const sidNo = () => {
      pageData.showAdd = false
      showJu.value = true
    }


    //保存接口
    const baocun = (data: any) => {
      post({
        url: "/aps/orderCustom/confirm",
        data: data
      }).then(({data, code, message}: any) => {
        // console.log(data,"下拉返回");
        if (code === 200) {
          Message.success({
            content: "保存成功",
            duration: 200,
          });

        } else {
          Message.error({
            content: message,
            duration: 5000,
          });
        }
      });
    }
    //导入巨客户订单
    const sideaOk = () => {
      yesOrder()

      if (yesOrderList.length > 0) {
        form.a.customOrderCode = yesOrderList[0].customOrderCode
        form.a.customPoCode = yesOrderList[0].customPoCode
        form.a.authorizedStrengthTime = new Date(yesOrderList[0].authorizedStrengthTime)
        form.a.customName = yesOrderList[0].customName
        form.a.customOrderName = yesOrderList[0].customOrderName
        form.a.clientDocumentary = yesOrderList[0].clientDocumentary
        form.a.season = yesOrderList[0].season
        form.a.lastDeliveryTime = new Date(yesOrderList[0].lastDeliveryTime)
        form.a.initialDeliveryTime = new Date(yesOrderList[0].initialDeliveryTime)


        for (let i = 0; i < yesOrderList.length; i++) {
          let a = {...planOrderDetails, ...yesOrderList[i]}
          a.serialNo = form.a.planOrderDetails.length + 1
          form.a.planOrderDetails.push(JSON.parse(JSON.stringify(a)))
          setTimeout(function () {
            gridOptionyB.value.setRowData(form.a.planOrderDetails);
          }, 0)
        }
        form.a.colourSum = form.a.planOrderDetails.length
        showJu.value = false
      }
      pageData.importAdd = false
      pageData.showAdd = true;
      count()
    }
    const sideaNo = () => {
      for (let i = 0; i < yesOrderList.length; i++) {
        let a = {...planOrderDetails, ...yesOrderList[i]}
        form.a.planOrderDetails.push(JSON.parse(JSON.stringify(a)))
        setTimeout(function () {
          gridOptionyB.value.setRowData(form.a.planOrderDetails);
        }, 0)
      }
      pageData.importAdd = false
      pageData.showAdd = true;
      count()
    }

    //初始化
    function initCum() {
      form.a = {
        orderCode: "",
        authorizedStrengthTime: Date.now(),
        productionMode: "",
        customName: "",
        constitute: "",
        lastDeliveryTime: "",


        customOrderCode: "",
        workshop: "",
        salesDepartment: "",
        customOrderName: "",
        hqDeliveryTime: "",
        require: "",


        customPoCode: "",
        testCriterion: "",
        machinType: "",
        clientDocumentary: "",
        marketingDeliveryTime: "",
        marketType: "",


        clientDyeCode: "",
        coloringIlluminant: "",
        orderNature: "",
        placeDepartment: "",
        initialDeliveryTime: "",
        circulatCardType: "",


        clientPlanOrderCode: "",
        handDatum: "",
        settlementFirm: "粤隆纺织",
        ultimatelyBuyer: "",
        urgentCategory: "",
        remark: "",


        clientBillsType: "",
        labelFormatCode: "",
        settlementName: "",
        season: "",
        dyeAuditDate: "",
        saleType: "",


        clientProductionMode: "",
        informRemark: "",
        crockCost: "",
        account: "",
        cause: "",
        colourSum: 1,

        planOrderDetails: [],
        requirement: [{
          requiredItems: "",
          nowRequirement: "",
          defaultRequirement: "",
          unit: "",
          greyType: "",
          remark: "",
        }],
        planOderGreys: [],
        planOrderWorkshop: [],
        planOrderCast: []


      }
    };
    const deleteHandler = () => {
      var arr = [];
      if (trigger.value == '1') {
        if (shen.value == 0) {
          arr = gridOption.value.getSelectedRows().map((item) => {
            return item.id
          })
        } else {
          arr = gridOptionA.value.getSelectedRows().map((item) => {
            return item.id
          })
        }
      } else {
        if (shen.value == 0) {
          arr = gridOption.value.getSelectedRows().map((item) => {
            return item.id
          })
        } else {
          arr = gridOptionA.value.getSelectedRows().map((item) => {
            return item.id
          })
        }
      }

      //console.log(gridOption.value.getSelectedRows(), "lkj");
      if (arr.length === 0) {
        Message.warning({
          content: "请选择要删除的数据",
          duration: 5000,
        });
        return;
      }
      // console.log(arrs);
      Modal.confirm({
        title: "系统提示",
        content: "确认删除选中的数据?",
        onOk() {
          post({
            url: "aps/planOrder/delete",
            data: arr,
          }).then(({code, data, message}: any) => {
            // console.log(code,"删除的状态码")
            if (code === 200) {
              Message.success({
                content: "删除成功",
                duration: 5000,
              });
              doRefresh(shen.value)
              pages.value = 1;
            } else {
              Message.error({
                content: message,
                duration: 5000,
              });
            }
          });
        },
      });
    };

    const exCustomer = () => {
      pageData.showAdd = false
      pageData.importAdd = true
    }

    //导出
    const exports = () => {
      if (selectedRowKeys.value.length === 0) {
        Message.error('请先勾选')
        return
      } else {
        //将表头拼接出来
        let head = "<th>编号</th><th>名称</th><th>备注</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>"
        //拿到当前表格数据与勾选的行做筛选

        let nowRow = table.dataList.filter(function (o) {
          return selectedRowKeys.value.indexOf(o["id"]) !== -1;
        })
        let body = "";
        nowRow.forEach(function (o) {
          body += "<tr><td>" + o["merceryCode"] + "</td>";
          body += "<td>" + o["merceryName"] + "</td>";
          body += "<td>" + o["remark"] + "</td>";
          body += "<td>" + o["createName"] + "</td>";
          body += "<td>" + o["createTime"] + "</td>";
          body += "<td>" + o["updateName"] + "</td>";
          body += "<td>" + o["updateTime"] + "</td>";
          body += "</tr>";
        })
        tableToXlsx(head, '布类资料', body)
        //  console.log(table)
      }
    }

    function tableToXlsx(head: any, filename: any, body: any) {
      const uri = 'data:application/vnd.ms-excel;base64,',
          template = `<html>
          <head><meta charset="UTF-8"></head>
          <body><table border="1"><tr>${head}</tr>${body}</table></body>
      </html>`;

      const a = document.createElement('a');
      a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
      a.download = filename;
      a.click();
      document.removeChild(a);
    }


    function getOrderNature(codeType: any, dictionary: any) {
      post({
        url: "dict/dictTypeDetail/getList",
        data: {
          codeType: codeType,
          obsoleteState: 0,
          deleteState: 0
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          switch (dictionary) {
            case '订单性质':
              basicData.orderNature = data
              break;
            case '结算方式':
              basicData.Calculation = data
              break;
            case '面料销售类型':
              basicData.plusMaterial = data
              break;
            case '结算公司':
              basicData.corporation = data
              break;
          }
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });
    }

    //新增下拉
    const basicData = reactive({
      dictTypeList: ['订单性质', '结算方式', '面料销售类型', '结算公司'],
      ProductionMode: [],
      machinType: [],
      ExchangecalorieClassify: [],
      saleType: [],
      labelFormat: [],
      UrgentCategory: [],

      orderNature: [],
      Calculation: [],
      plusMaterial: [],
      corporation: [],
      custom: [],
      hrEmployee: [],
      baCompany: [],
      VerifyStandard: [],
      coloringMatch: [],
      seasonSet: []

    })

    //下拉框集合方法
    function getProductionMode() {
      pageData.pageLoading = true
      //生产方式
      post({
        url: "/aps/ProductionMode/getFieldValue",
        data: {
          productionMode: ''
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          basicData.ProductionMode = data
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });
      //加工类型
      post({
        url: "/aps/machinType/getDropValue",
        data: {
          machinType: ''
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          basicData.machinType = data
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });

      //流转卡归类
      post({
        url: "/aps/ExchangecalorieClassify/getDropValue",
        data: {
          exchangeCalorieClassify: ''
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          basicData.ExchangecalorieClassify = data
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });

      //销售类型
      post({
        url: "/aps/SaleType/getFieldValue",
        data: {
          saleType: ''
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          basicData.saleType = data
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });

      //标签格式
      post({
        url: "/aps/labelFormat/getDropValue",
        data: {
          labelFormat: ''
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          basicData.labelFormat = data
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });


      //加急类型
      post({
        url: "/aps/UrgentCategory/getFieldValue",
        data: {
          urgentCategory: ''
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          basicData.UrgentCategory = data
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });

      //测试标准
      post({
        url: "/pdm/VerifyStandard/getFieldValue",
        data: {
          verifyStandard: ''
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          basicData.VerifyStandard = data
        }

      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });


      //测试标准
      post({
        url: "/pdm/coloringMatch/getFieldValue",
        data: {
          colourLight: ''
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          basicData.coloringMatch = data
        }

      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });


      //季节
      post({
        url: "/pdm/seasonSet/getFieldValue",
        data: {
          seasonName: '季节1'
        }
      }).then(({data, code}: any) => {

        if (code === 200) {
          basicData.seasonSet = data
        }

      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });


      //   客订名称
      post({
        url: "/aps/custom/getDropValue",
        data: {
          customName: ''
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          basicData.custom = data
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });

      //部门管理
      post({
        url: "/org/baCompany/getDepartmentTreeByUser",
      }).then(({data, code}: any) => {
        if (code === 200) {

          basicData.baCompany = data
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });


      if (basicData.baCompany.length > 0) {
        // 业务员
        post({
          url: "/org/hrEmployee/getList",
          data: {
            departmentId: ""
          }
        }).then(({data, code}: any) => {
          if (code === 200) {
            basicData.hrEmployee = data
          }
        }).catch(console.log).finally(() => {
          pageData.pageLoading = false
        });

      }


      //字典
      for (let i = 0; i < basicData.dictTypeList.length; i++) {

        post({
          url: "dict/dictType/getList",
          data: {
            typeName: basicData.dictTypeList[i],
            deleteState: 0
          }
        }).then(({data, code}: any) => {
          if (code === 200) {
            if (data[0].codeType != 'undefined') {
              console.log(data[0].codeType, 'kkkkkkkkkkkkkkkkkkk')
              getOrderNature(data[0].codeType, basicData.dictTypeList[i])
            }
          }
        }).catch(console.log).finally(() => {
          pageData.pageLoading = false
        });

      }
    }


    const dingID = (value: any) => {

      post({
        url: "/aps/planOrder/getAutomaticInfo",
        data: {
          machinType: value
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          form.a.orderCode = data.maxOrderCode

        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });

    }


    /**********底部合计******* */

    function count() {
      console.log(form.a.planOrderDetails, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
      let a = 0;
      let b = 0;
      let c = 0;
      console.log(form)
      for (var i = 0; i < form.a.planOrderDetails.length; i++) {
        a = a + Number(form.a.planOrderDetails[i].houseNum)
        b = b + Number(form.a.planOrderDetails[i].finishedWeight)
        c = c + Number(form.a.planOrderDetails[i].castDyeWeight)
      }
      var topRows = [
        {headerName: '合计', houseNum: a, finishedWeight: b, castDyeWeight: c}
      ];
      guanxiData = {
        houseNum: Number(a),
        finishedWeight: Number(b),
        castDyeWeight: Number(c)
      }
      // gridOptionyB.value.setPinnedBottomRowData(topRows);
    }

    /***************************************** */

    //取布种要求
    function getBu() {
      post({
        url: "/pdm/RequireClassify/getSon",
        data: {},
      }).then((re: any) => {
        form.a.requirement = re
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });
    }

    const gridOptiony = ref()
    const gridReadye = (params: any,) => {
      gridOptiony.value = params.api
      console.log("触发");
    }

    const gridOptionyB = ref()
    const gridReadyeB = (params: any,) => {
      gridOptionyB.value = params.api
      console.log("触发");
    }

    let planOrderDetails = {
      id: null,
      needState: 0,
      clothCode: "",
      productName: "",
      colorCode: "",
      colorName: "",
      affirmColor: "",
      greyCode: "",
      greyName: "",
      houseNum: 0,
      finishedWeight: 0,
      castDyeWeight: 0,
      castDyeLength: 0,
      finishedLength: 0,
      contrastColor: "",
      edge: 0,
      bumpWhite: 0,
      firstRate: 0,
      dialPrinting: 0,
      resistanceYellow: "",
      chlorineResistant: "",
      wetRubbing: 0,
      rcInfo: 0,
      stainResistance: 0,
      dyeingType: "",
      greyType: "",
      craftCode: "",
      colorDepth: "",
      trimCharges: "",
      needEnterPot: 0,
      joinDyeType: "要求合染不收费",
      takeDyeFee: 0,
      repeatPack: 0,
      byPieceBreadth: 0,
      byPieceGramWeight: 0,
      dyeUnitPrice: 0,
      hqUnitPrice: 0,
      veryPrice: 0,
      polybagPrice: 0,
      tubePrice: 0,
      taxRate: "",
      feeConstitute: "",
      neatEmbryoTime: "",
      deliveryTime: "",
      ingredient: "",
      yarnCount: "",
      embryoOrderNumber: "",
      customClothCode: "",
      customProductName: "",
      customColorCode: "",
      customColorName: "",
      efficacious: "",
      gramWeight: 0,
      upperLimit: "",
      lowerLimit: "",
      gramUpperLimit: 0,
      gramLowerLimit: 0,
      numberCylinders: 0,
      styleNumber: "",
      tradeName: "",
      finishedClothCode: "",
      finishedClothName: "",
      needPersonnel: "",
      needTime: "",
      hqCardNumber: "",
      rawColorCode: "",
      rawColorName: "",
      currency: "",
      closeAccountWeight: 0,
      closeAccountUnit: "",
      makeEditionCost: 0
    }
    //订单明细新增
    const planOrderDetailsAdd = () => {
      form.a.planOrderDetails.push(JSON.parse(JSON.stringify(planOrderDetails)))
      setTimeout(function () {
        gridOptionyB.value.setRowData(form.a.planOrderDetails);
      }, 0)
    }

    const planorderCastGr = ref()
    const planorderReaGr = (params: any,) => {
      planorderCastGr.value = params.api
      console.log("触发");
    }

    let guanxiData = {
      houseNum: 0,
      finishedWeight: 0,
      castDyeWeight: 0
    }


    let guanxiForm = reactive({
          customOrderCode: '',
          clothCode: '',
          productName: '',
          colorCode: '',
          colorName: '',
          auditState: 0
        }
    )
    const guanxiCount = () => {
      post({
        url: "/aps/orderCustom/getList",
        data: guanxiForm
      }).then(({data, code}: any) => {
        // console.log(data,"下拉返回");
        console.log(data)
        if (code === 200) {
          orderCustomList.list = data;
        }
      });
    }
    const guanxi = (key: any) => {
      if (key == 2) {
        count()
      }
      if (key == 5) {
        count()
        if (pageData.sideTitle === '计划订单') {
          post({
            url: "/aps/planOrder/getData",
            data: guanxiData
          }).then(({data, code}: any) => {
            if (code === 200) {
              form.a.planOrderCast = data
              console.log(form.a.orderCode, 'sssssssssssssssssssssssss')
            }
          }).catch(console.log).finally(() => {
            pageData.pageLoading = false
          });
        }

      }

    }
    //总坯布
    const countBu = () => {
      post({
        url: "/aps/planOrderGrey/getList",
        data: {
          planOrderId: 1,
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          form.a.planOderGreys = data
          // console.log(form.a.orderCode, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });
    }
    //色号生产车间
    const colorChe = () => {
      post({
        url: "/aps/planOrder/getWorkshopInfo",
        data: {
          colorCode: '测试01',
        }
      }).then(({data, code}: any) => {
        if (code === 200) {
          form.a.planOrderWorkshop = data
          // console.log(form.a.orderCode, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false
      });
    }

    //管型新增
    const planorderCastAdd = () => {
      let planOrderCast = {
        id: null,
        workshop: '',
        castNum: 1,
        retainingNum: 1,
        remark: 1
      }
      form.a.planOrderCast.push(JSON.parse(JSON.stringify(planOrderCast)))
      setTimeout(function () {
        planorderCastGr.value.setRowData(form.a.planOrderCast);
      }, 0)
    }


    //模板下载
    const downloadHandler = () => {
      axios.get('/api/aps/orderCustom/uploadOrderCustomeModel', {
        responseType: 'blob',
        headers: {
          token: sessionStorage.getItem('USER-TOKEN-KEY')
        }
      }).then((res) => {
        if (res.status === 200) {
          filedownload(res.data, '巨客户模板.xlsx')
        }
      })
    }
    const orderCustomList = reactive({
      list: []
    })
    //导入
    const importHandler = () => {

      const inputEle: HTMLInputElement = document.createElement('input')
      inputEle.type = 'file'
      inputEle.id = 'fileUploadExcel'
      inputEle.accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
      inputEle.addEventListener('change', (e) => {
        const formData = new FormData()
        if (inputEle.files !== null) {
          formData.append('file', inputEle.files[0] || '')
          formData.append('customOrderCode', form.a.customOrderCode)
        } else {
          Message.warning('未选择文件！');
          return
        }
        pageData.pageLoading = true
        axios.post('/api/aps/orderCustom/analyseOrderCustomeModel',
            formData,
            {
              headers: {
                "Content-Type": 'multipart/form-data',
                "token": sessionStorage.getItem('USER-TOKEN-KEY')
              },
            }).then((result) => {
          if (result.data['code'] === 200) {
            for (let i = 0; i < result.data['data'].length; i++) {
              result.data['data'][i].id = null
            }
            orderCustomList.list = result.data['data']
            Message.success('导入成功')
          } else {
            Message.error(result.data.message)
          }

        }).finally(() => {
          // pageData.pageLoading = false
          // doRefresh()
          post({
            url: "/aps/orderCustom/getList",
          }).then(({data, code}: any) => {
            if (code === 200) {
              // orderCustomList.list = data
            }
          }).catch(console.log).finally(() => {
            pageData.pageLoading = false
          });
        })
      })
      inputEle.click()
    }
    const mobanYn = (key: any) => {
      if (key == 1) {
        guanxiForm.auditState = 0
        guanxiCount()
      } else {
        guanxiForm.auditState = 1
        guanxiCount()
      }
      console.log(guanxiForm.auditState, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
    }
    /******************************************************取布号**********************************************************/
    const clothCodeBoSel = () => {
      clothCodeAll({clothCode: "", auditState: 1, deleteState: 0, obsoleteState: 0})
    }
    let optionsList = ref([])
    let clothCodeList = ref<any>(optionsList.value);
    let clothCodeBo = ref(false);

    const clothCodeSearch = (value: any) => {
      const ob = {clothCode: value, auditState: 1, deleteState: 0, obsoleteState: 0}
      clothCodeBo.value = true;
      clothCodeAll(ob);
      clothCodeList.value = optionsList.value;
      clothCodeBo.value = false;
    };

    function clothCodeAll(val: any) {
      post({
        url: "/pdm/DevFabricInfo/getLikeList",
        data: val
      }).then(({data, code, message}: any) => {
        if (code === 200) {
          optionsList.value = data;
        } else {
          Message.error({
            content: message,
            duration: 5000,
          });
        }
      });
    }

    /********************************************************************取品名************************************************************************ */
    let pinList = ref([])
    const clothCodeBoSelA = () => {
      clothCodeAllA({brandName: "", auditState: 1, deleteState: 0, obsoleteState: 0})
    }
    let clothCodeListA = ref<any>(pinList.value);
    let clothCodeBoA = ref(false);

    const clothCodeSearchA = (value: any) => {
      const ob = {brandName: value, auditState: 1, deleteState: 0, obsoleteState: 0}
      clothCodeBoA.value = true;
      clothCodeAllA(ob);
      clothCodeListA.value = pinList.value;
      clothCodeBoA.value = false;
    };

    function clothCodeAllA(val: any) {
      post({
        url: "/pdm/DevFabricInfo/getLikeList",
        data: val
      }).then(({data, code, message}: any) => {
        if (code === 200) {
          pinList.value = data;
        } else {
          Message.error({
            content: message,
            duration: 5000,
          });
        }
      });
    }


    const selectPin = () => {
      post({
        url: "/pdm/DevFabricInfo/getFieldValue",
        data: {
          brandName: ''
        }
      }).then(({data, code}: any) => {
        // console.log(data,"下拉返回");
        console.log(data)
        if (code === 200) {
          pinList.value = data;
        }
      });
    }

    watch(() => form.a.planOrderDetails, () => {
      console.log(form.a.planOrderDetails, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbb')
    }, {deep: true})
    return {
      alone,
      alonell,
      scroll,
      scrollbar,
      tablediv,
      downloadHandler,
      importHandler,
      hasChiese,
      deleteHandler,
      sideOk,
      sidNo,
      sideaOk,
      sideaNo,
      formRef,
      dataForm,
      addHandler,
      selectedRowKeys,
      pagination,
      // tableColumns,
      table,
      tableCon,
      rowKey,
      pageData,
      queryData,
      editHandler,
      selectHandler,
      options,
      loading,
      handleSearch,
      exports,
      focusSel,
      paging,
      pagingChange,
      pagingSizeChange,
      headerShow,
      showJu,
      headerShowS,
      pages,
      gridOptiony,
      gridReadyeB,
      gridReadye,
      /**************** */
      rowData,
      defaultColDef,
      columnDefs,
      tc,
      ta,
      tco,
      gridReady,
      gridReadyA,
      gridReadyB,
      gridOptionB,
      gridReadyC,
      gridOptionC,
      yesOrder,
      gridOption,
      form,
      total,
      InformationEnglishbt,
      tcy,
      trigger,
      getBu,
      planOrderDetailsAdd,
      dingID,
      /************************ */
      Search,
      CirclePlus,
      Delete,
      EditPen,
      fromList,
      getProductionMode,
      getOrderNature,
      basicData,
      columnsOrder,
      colorCar,
      tableConA,
      deleteBzyq,
      initCum,
      exCustomer,
      orderCustomList,
      hugeCustomer,
      gridOptionA,
      changeGet,
      planOrderDetails,
      yesOrderList,
      planorderCastAdd,
      planorderReaGr,
      planorderCastGr,
      guanxi,
      guanxiData,
      guanxiForm,
      guanxiCount,
      countBu,
      colorChe,
      shen,
      InforRequirement,
      count,
      changeGetS,
      xuahoZiZeng,
      xuHaoFun,
      headerName,
      mobanYn,
      selectPin,
      optionsList,
      pinList,
      baocun,
      clothCodeBo,
      clothCodeList,
      clothCodeSearch,
      clothCodeAll,
      clothCodeBoSel,
      clothCodeBoA,
      clothCodeListA,
      clothCodeSearchA,
      clothCodeAllA,
      clothCodeBoSelA
    };
  },

  components: {
    Toolbar,
    tagRender,
    cheCk,
    cheCkBumpWhite,
    CheCkdialPrinting,
    checheCkEdgeCK,
    cheCkFirstRate,
    cheCKneedEnterPot,
    cheCkrcInfo,
    cheCkrepeatPack,
    cheCkstainResistance,
    cheCktakeDyeFee,
    cheCkwetRubbing,
    selectGreyCode,
    selectGreyName,
    selectColorCode,
    selectColorName,
    selectAffirmColor,
    selectGreyType,
    selectTrimCharges,
    selectDyeingType,
    selectColorDepth
  },
};
</script>
<style lang="less" scoped>
.pagings {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.arco-input-wrapper {
  background-color: #fff !important;
  border: 1px solid #cccccc;
}

.arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled),
.arco-form-item-status-error .arco-textarea-wrapper:not(.arco-textarea-disabled) {
  border: 1px solid #f53f3f;
}


/********************************************** */
.stbutencx {
  background-color: #409eff;

  &:hover {
    background-color: #79bbff;
  }
}


.ag-header-cell-resize::after {
  top: 0 !important;
  height: 100% !important;
}

.ag-cell {
  border-right: 1px solid #D9DDDF !important;
}

.stbutenxz {
  background-color: #67c23a;

  &:hover {
    background-color: #b3e19d;
  }
}

:deep(.arco-picker input) {
  padding-left: 0 !important;
}

:deep(.arco-picker) {
  padding-left: 0 !important;
}

:deep(.arco-picker-separator) {
  padding: 0 !important;
}

:deep(.arco-tabs) {
  height: 100%;
}

:deep(.arco-tabs-content) {
  height: 100%;
}

:deep(.arco-tabs-content-list) {
  height: 100%;
}

:deep(.arco-tabs-pane) {
  height: 100%;
}

/************************************************** */
</style>